{#{% extends 'base.html' %}#}
{% load static %}

{% block content %}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatibale" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard</title>
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
  <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<section class="header">
  <div class="logo">
    <i class="ri-menu-line icon icon-0 menu"></i>
    <h2>Med<span>Ex</span></h2>
  </div>
  <div class="search--notification--profile">
    <div class="search">
      <input type="text" placeholder="Search Scdule..">
      <button><i class="ri-search-2-line"></i></button>
    </div>
    <div class="notification--profile">
      <div class="picon lock">
        <i class="ri-lock-line"></i>
      </div>
      <div class="picon bell">
        <i class="ri-notification-2-line"></i>
      </div>
      <div class="picon chat">
        <i class="ri-wechat-2-line"></i>
      </div>
      <div class="picon profile">
        <img src="assets/images/pic1.webp"alt="">
      </div>

    </div>
  </div>

</section>
<section class="main">
  <div class="sidebar">
    <ul class="sidebar--items">
      <li>
        <a href="#" id="active--link">
          <span class="icon icon-1"><i class="ri-layout-line"></i></span>
          <span class="sidebar--item" style="white-space: nowrap">Dashboard</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon icon-2"><i class="ri-calendar-2-line"></i></span>
          <span class="sidebar--item">Schedule</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon icon-3"><i class="ri-user-2-line"></i></span>
          <span class="sidebar--item">Reliable Doctor</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon icon-4"><i class="ri-layout-grid-line"></i></span>
          <span class="sidebar--item">Patients</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon icon-5"><i class="ri-line-chart-line"></i></span>
          <span class="sidebar--item">Activity</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon icon-6"><i class="ri-customer-service-line"></i></span>
          <span class="sidebar--item">Support</span>
        </a>
      </li>
    </ul>
    <ul class="sidebar--bottom-item">
      <li>
        <a href="#">
          <span class="icon icon-7"><i class="ri-settings-3-line"></i></span>
          <span class="sidebar--item">Settings</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon icon-8"><i class="ri-logout-box-r-line"></i></span>
          <span class="sidebar--item">Logout</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="main--content">
    <div class="overview">
      <div class="title">
        <h2 class="section--title">Overview</h2>
        <select name="date" id="date" class="dropdown">
          <option value="today">Today</option>
          <option value="lastweek">Last Week</option>
          <option value="lastmonth">Last Month</option>
          <option value="lastyear">Last Year</option>
          <option value="alltime">All Time</option>
        </select>
      </div>
      <div class="cards">
        <div class="card card-1">
          <div class="card--date">
            <div class="card--content">
              <h5 class="card--title">Total Doctors</h5>
              <h1>152</h1>
            </div>
            <i class="ri-user-2-line card--icon--1g"></i>
          </div>
          <div class="card--stats">
            <span><i class="ri-bar-chart-fill card--icon stat--icon"></i>65%</span>
            <span><i class="ri-arrow-up-s-fill card--icon up--arrow"></i>10</span>
            <span><i class="ri-arrow-down-s-fill card--icon down--arrow"></i>2</span>
          </div>
        </div>
        <div class="card card-2">
          <div class="card--date">
            <div class="card--content">
              <h5 class="card--title">Всего пациентов</h5>
              <h1>{{ count }}</h1>
            </div>
            <i class="ri-user-line card--icon--1g"></i>
          </div>
          <div class="card--stats">
            <span><i class="ri-bar-chart-fill card--icon stat--icon"></i>{{ result | floatformat }}%</span>
            <span><i class="ri-arrow-up-s-fill card--icon up--arrow"></i>{{ patients_last_24_hours }}</span>
            <span><i class="ri-arrow-down-s-fill card--icon down--arrow"></i>2</span>
          </div>
        </div>
        <div class="card card-3">
          <div class="card--date">
            <div class="card--content">
              <h5 class="card--title">Schedule</h5>
              <h1>152</h1>
            </div>
            <i class="ri-calendar-2-line card--icon--1g"></i>
          </div>
          <div class="card--stats">
            <span><i class="ri-bar-chart-fill card--icon stat--icon"></i>65%</span>
            <span><i class="ri-arrow-up-s-fill card--icon up--arrow"></i>10</span>
            <span><i class="ri-arrow-down-s-fill card--icon down--arrow"></i>2</span>
          </div>
        </div>
        <div class="card card-4">
          <div class="card--date">
            <div class="card--content">
              <h5 class="card--title">Beds Available</h5>
              <h1>152</h1>
            </div>
            <i class="ri-hotel-bed-line card--icon--1g"></i>
          </div>
          <div class="card--stats">
            <span><i class="ri-bar-chart-fill card--icon stat--icon"></i>65%</span>
            <span><i class="ri-arrow-up-s-fill card--icon up--arrow"></i>10</span>
            <span><i class="ri-arrow-down-s-fill card--icon down--arrow"></i>2</span>
          </div>
        </div>
      </div>
    </div>
    <div class="doctors">
      <div class="title">
        <h2 class="section--title">Doctors</h2>
        <div class="doctors--right--btns">
          <select name="date" id="date" class="dropdown doctor--filter">
            <option>Filter</option>
            <option value="free">Free</option>
            <option value="scheduled">Scheduled</option>
          </select>
          <button class="add"><i class="ri-add-line"></i>Add Doctor</button>
        </div>
      </div>
      <div class="doctors--cards">
        <a href="#" class="docters--card">
          <div class="img--box--cover">
            <div class="img--box">
              <img src="{% static 'images/doctor.png' %}" >
            </div>
          </div>
          <p class="scheduled">Scheduled</p>
        </a>
        <a href="#" class="docters--card">
          <div class="img--box--cover">
            <div class="img--box">
              <img src="{% static 'images/doctor11.webp' %}" >
            </div>
          </div>
          <p class="free">Free</p>
        </a>
        <a href="#" class="docters--card">
          <div class="img--box--cover">
            <div class="img--box">
              <img src="assets/images/pic1.webp" >
            </div>
          </div>
          <p class="fee">Free</p>
        </a>
        <a href="#" class="docters--card">
          <div class="img--box--cover">
            <div class="img--box">
              <img src="assets/images/pic2.webp" >
            </div>
          </div>
          <p class="scheduled">Scheduled</p>
        </a>
        <a href="#" class="docters--card">
          <div class="img--box--cover">
            <div class="img--box">
              <img src="assets/images/pic1.webp" >
            </div>
          </div>
          <p class="fee">Free</p>
        </a>
        <a href="#" class="docters--card">
          <div class="img--box--cover">
            <div class="img--box">
              <img src="assets/images/pic2.webp" >
            </div>
          </div>
          <p class="scheduled">Scheduled</p>
        </a>
      </div>
    </div>
    <div class="recent--patients">
      <div class="title">
        <h2 class="section--title">Recent Patients</h2>
        <button class="add"><i class="ri-add-line"></i>Add Doctor</button>
      </div>
      <div class="table">
        <table>
          <thead>
          <tr>
            <th>Name</th>
            <th>Date in</th>
            <th>Gender</th>
            <th>Age</th>
            <th>Status</th>
            <th>Settings</th>
          </tr>
          </thead>
          <tbody>
          {% for i in latest %}              
          
          <tr>
            <td>{{ i.name}}</td>
            <td>{{ i.date_in }}</td>
            <td>{{ i.gender }}</td>
            <td>{{ i.age }}</td>              
            <td class="pending">{{ i.status }}</td>
            <td><span><i class="ri-edit-line edit"></i><i class="ri-delete-bin-line delete"></i></span></td>
          </tr>
           {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
<script src = "{% static 'js/main.js' %}"></script>
</body>

</html>

{% endblock content %}
